<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Title</title>
  <link rel="stylesheet" href="/res/plugin/materialize/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
  <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
  <link rel="stylesheet" href="/res/stylesheets/admin-common.css">
  <link rel="stylesheet" href="/res/css/manage/category.css">

  <style>

  </style>
</head>
<body>
<header>
  <div class="row">
    <div class="col s6 header-left">
      <div class="hide-on-med-and-down">后台管理系统</div>
    </div>
    <div class="col s6 right-align header-right">
      <div class="hide-on-med-and-down">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div>
        <a href="#" data-activates="nav-mobile" class="button-collapse top-nav waves-effect waves-light circle hide-on-large-only">
          <i class="material-icons">view_headline</i>
        </a>
      </div>
    </div>
  </div>
  <div class="container">


  </div>
  <ul id="nav-mobile" class="side-nav fixed" style="transform: translateX(0%);">
    <li class="bold"><a href="javscript:;" class="waves-effect waves-teal">关于</a></li>
    <li class="bold"><a href="javscript:;" class="waves-effect waves-teal">开始使用</a></li>
    <li class="no-padding">
      <ul class="collapsible collapsible-accordion">
        <li class="bold"><a class="collapsible-header waves-effect waves-teal">CSS</a>
          <div class="collapsible-body">
            <ul>
              <li><a href="javscript:;">颜色</a></li>
              <li><a href="javscript:;">Grid</a></li>
            </ul>
          </div>
        </li>
        <li class="bold"><a class="collapsible-header waves-effect waves-teal">Components</a>
          <div class="collapsible-body">
            <ul>
              <li><a href="javscript:;">Badges</a></li>
              <li><a href="javscript:;">Buttons</a></li>
            </ul>
          </div>
        </li>
        <li class="bold"><a href="javscript:;" class="waves-effect waves-teal">Mobile</a></li>
        <li class="bold"><a href="javscript:;" class="waves-effect waves-teal">展示</a></li>
        <li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
          <div class="collapsible-body">
            <ul>
              <li><a href="javscript:;">Carousel</a></li>
              <li><a href="javscript:;">Collapsible</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </li>
    <li class="bold"><a href="themes.html" class="waves-effect waves-teal">Themes<span class="new badge"></span></a></li>
  </ul>
</header>
<main>
  <!-- Modal Trigger -->
  <button type="button" class="waves-effect waves-light btn" id="add_modal_show">新增主题</button>

  <!-- Modal Structure -->
  <div id="editor_modal" class="modal modal-fixed-footer">
    <div class="modal-content">
      <h4 class="center-align">新增主题</h4>
      <div class="row">
        <form id="editor_form" action="" class="row s12 editor_form">
          <div class="row">
            <div class="input-field col s12">
              <input id="input_cateName" name="cateName" type="text" class="validate" maxlength="15" data-length="15">
              <label for="input_cateName">主题名</label>
            </div>
            <div class="input-field col s12">
              <input id="input_link" type="text" name="link" class="validate">
              <label for="input_link">链接(非必填,点击跳转地址)</label>
            </div>
          </div>
          <div class="row upload_img_div">
            <div class="file-field input-field" id="upload_img_btn_wrapper">
              <div class="waves-effect waves-light btn valign-wrapper">
                <i class="material-icons">file_upload</i>
                上传图标
                <input type="file" id="input_img" class="input_img" name="img">
              </div>
              <!--<div class="file-path-wrapper">
                <input class="file-path validate" type="text">
              </div>-->
            </div>
            <div class="col s6 img_wrapper">
              <img src="" height="36px">
              <div class="preloader-wrapper big active">
                <div class="spinner-layer spinner-blue-only">
                  <div class="circle-clipper left">
                    <div class="circle"></div>
                  </div>
                  <div class="gap-patch">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-clipper right">
                    <div class="circle"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="right">
              <button class="waves-effect waves-teal btn-flat"><i class="material-icons">clear</i></button>
            </div>
          </div>
          <div>
            <div class="input-field col s12">
              <input id="input_alias" name="alias" type="text" class="validate" maxlength="20" data-length="20">
              <label for="input_alias">别名(不填将自动生成)</label>
            </div>
          </div>
          <div class="row">
            <div class="switch">
              <label>
                私密
                <input type="checkbox" name="isSecret" id="input_isSecret" checked>
                <span class="lever"></span>
                公开
              </label>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" id="editor_modal_cancel" class="modal-action modal-close waves-effect waves-green btn-flat ">取消</button>
      <button type="button" id="editor_modal_sure" class="modal-action modal-close waves-effect waves-green btn">同意</button>
    </div>
  </div>
  <div class="list-wrapper">
    <!--<div id="list-title" class="list-title container">
      <div class="row">
        <div class="col s12 m6">
          <div class="img-and-category-wrapper">
            <div class="img-wrapper ">
              <div class="drags"></div>
              <div class="category-img">图标</div>
            </div>
            <div class="category">
              主题名
            </div>
          </div>
        </div>
        <div class="col s12 m6">
          <div class="alias-and-operation-wrapper">
            <div class="alias">alias</div>
            <div class="operation-wrapper">
              <span>状态</span>
              <span>链接</span>
              <span class="right">操作</span>
            </div>
          </div>
        </div>
      </div>
    </div>-->
<div id="list-content" class="list-content container">

</div>

    <!--    <div id="list-content" class="list-content container">
          <div class="row valign-wrapper" data-id="${item._id}">
            <div class="col s12 m6 img-and-category-wrapper">
              <div class="img-wrapper valign-wrapper">
                <div><i class="material-icons">open_with</i></div>
                <div class="category-img"><img src="${item.img}"></div>
              </div>
              <div class="category">
                主题名
              </div>
            </div>

            <div class="col s12 m6 alias-and-operation-wrapper">
              <div class="alias">${item.alias}</div>
              <div class="status-and-link-wrapper">
                <span>${item.isSecret ? '隐私' : '公开'}</span>
                <span>${item.link ? '<a href="item.link">链接</a>' : '默认'}</span>
              </div>
              <div class="operation-wrapper">
                <a href="javascript:;" class="waves-effect waves-light">修改</a>
                <a href="javascript:;" class="waves-effect waves-light">删除</a>
              </div>
            </div>

          </div>
        </div>-->
  </div>

</main>

<script src="/res/plugin/jquery/jquery-3.2.1.min.js"></script>
<script src="/res/plugin/materialize/js/materialize.js"></script>
<script>
  var categoryId = null, img = null;
  $(function () {
    getCagegory();

    $('.modal').modal({
      'dismissible': false
    });
    $('#add_modal_show').on('click', function (e) {
      categoryId = null;
      img = null;
      $('#editor_modal h4').text('新增主题');
      $('#input_cateName').val('');
      $('#input_link').val('');
      $('#input_isSecret').prop('checked', true);
      // 上传图片初始化
      startUploadImg();
      $('#editor_modal').modal('open');
    });
    // 保存按钮
    $('#editor_modal_sure').on('click', function (e) {
      $('#editor_modal').modal('close');
      var cateName = $('#input_cateName').val();
      var link = $('#input_link').val();
      var alias = $('#input_alias').val();
      var isSecret = !($('#input_isSecret').prop('checked'));
      saveCategory({
        cateName,
        link,
        alias,
        isSecret,
        img
      });
    });
    $('#editor_modal_cancel').on('click', function (e) {
      $('#editor_modal').modal('close');
    });
    // 上传图标
    $('.upload_img_div').on('change', '.input_img', function (e) {
      var data = this.files[0];
      if (data) {
        $('#upload_img_btn_wrapper').hide();
        $('.upload_img_div .preloader-wrapper').show();
        uploadImg(data);
        $('.valign-wrapper input').remove();
        $('.valign-wrapper').append(`<input type="file" id="input_img" class="input_img" name="img">`)
      }
    });
    // 清除图片按钮
    $('.upload_img_div .right .btn-flat').on('click', function (e) {
      e.preventDefault();
      startUploadImg();
    });
    $('.button-collapse').sideNav();
    $('#nav-mobile').on('click', 'a', function (e) {
      console.log('11111111');
    });
    $('#btn-submit').on('click', function (e) {


    });
  });
  // 显示上传图片按钮
  function startUploadImg() {
    img = null;
    $('#upload_img_btn_wrapper').show();  //显示上传按钮
    $('.upload_img_div .preloader-wrapper').hide(); //隐藏加载层
    $('.upload_img_div .right').hide();   //隐藏清除按钮
    $('.img_wrapper>img').hide();     //隐藏图片
  }
  // 隐藏上传图片按钮
  function endUploadImg(url) {
    img = url;
    $('#upload_img_btn_wrapper').hide();
    $('.upload_img_div .preloader-wrapper').hide();
    $('.img_wrapper>img').attr('src', url).show();
    $('.upload_img_div .right').show();
  }
  // 发送保存请求
  function saveCategory(obj, id) {
    var url = '/api/blog/category';
    var method = 'post';
    if (id) {
      url = url + '/' + id;
      method = 'put';
    }
    fetch(url, {
      'method': method,
      'headers': {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      'credentials': 'include',
      'body': JSON.stringify(obj)
    }).then(function (response) {
      Materialize.toast('保存成功', 3000);
    }).catch(function (err) {
      Materialize.toast('保存失败', 3000);
    })
  }
  // 获取全部数据
  function getCagegory() {
    fetch('/api/blog/category/all', {
      'method': 'get',
      'headers': {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      'credentials': 'include',
    }).then(function (response) {
      if (Math.trunc(response.status / 100) === 2) {  //请求成功
        return response.json();
      } else {
        return Promise.reject();
      }
    }).then(function (result) {
      if (result.result === 1) {
        var html = '';
        result.data.forEach(function (item, index) {
          html += `
<div class="row" data-id="${item._id}">
  <div class="col s12 m5">
    <div class="img-and-category-wrapper">
      <div class="img-wrapper valign-wrapper">
        <div class="drags"><i class="material-icons">open_with</i></div>
        <div class="category-img"><img src="${item.img}"></div>
      </div>
      <div class="category">
        ${item.cateName}
      </div>
    </div>
  </div>
  <div class="col s12 m7">
    <div class="alias-and-operation-wrapper">
      <div class="alias">别名:${item.alias}</div>
      <div class="operation-wrapper" data-id="${item._id}">
        <span>${item.isSecret ? '隐私' : '公开'}</span>
        <span>${item.link ? '<a href="item.link">链接</a>' : ''}</span>
        <span class="right">
          <a href="javascript:;" class="waves-effect waves-light">修改</a>
          <a href="javascript:;" class="waves-effect waves-light">删除</a>
        </span>
      </div>
    </div>
  </div>
</div>
          `.trim();
        });
        $('#list-content').html(html);
      } else {
        throw ('');
      }
      console.dir(result);
    }).catch(function (err) {
      console.log(err)
      Materialize.toast('系统繁忙,获取数据失败', 3000);
    })
  }
  // 上传图片
  function uploadImg(obj) {
    var data = new FormData();
    data.append('upfile', obj)
    fetch('/ueditor/ue?action=uploadimage', {
      'method': 'POST',
      'credentials': 'include',
      'body': data
    }).then(function (response) {
      if (Math.trunc(response.status / 100) === 2) {  //请求成功
        return response.json();
      } else {
        return Promise.reject('系统异常,无法上传图片');
      }
    }).then((data) => {
      if (data.state === 'SUCCESS') {
        //上传成功
        endUploadImg(data.url);
      } else {
        throw('上传失败');
      }
    }).catch(function (err) {
      startUploadImg();
    })
  }
</script>
</body>
</html>